<template>
	<view style="background-color: rgb(250, 250, 250);height: 100vh;">
		<view class="top">
			<view class="top1">
				<text :class="state==''?'dqxz':''" @click="tab('')">全部</text>
				<text :class="state==1?'dqxz':''" @click="tab(1)">已到访</text>
				<text :class="state==2?'dqxz':''" @click="tab(2)">未到访</text>
			</view>
		</view>

		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1-1">
						到访时间： <text class="box1-1-1text">{{item.visitorEffectiveTime}}</text>
					</view>
					<view :class="item.status=='已邀请'?'box1-1-2':item.status=='已到访'?'box1-1-22':'box1-1-222'">
						{{item.status}}
					</view>
				</view>
				<view class="xian" style=""></view>

				<view class="box1-1">
					<view class="box1-1-1">
						申请人
					</view>
					<view class="box1-1-3">
						{{item.ordername}}
					</view>
				</view>
				<view class="box1-1">
					<view class="box1-1-1">
						到访人
					</view>
					<view class="box1-1-3">
						{{item.visitorName}}
					</view>
				</view>
				<view class="box1-1">
					<view class="box1-1-1">
						房产信息
					</view>
					<view class="box1-1-3">
						{{item.roomName}}
					</view>
				</view>
				<view class="xian" style=""></view>
				<view class="box1-1">
					<view class="box1-1-1" @click="erwem(item.id)">
						<image src="../../../static/fkerwm.png" mode=""></image>
					</view>
					<view class="box1-1-4">
						{{item.ctime}}
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: '',
				list: [],
				nextp: 1,

			}
		},
		onLoad() {

		},
		onShow() {
			this.getlist()
		},
		methods: {
			tab(e) {
				this.state = e
				this.nextp = 1
				this.getlist()
			},
			erwem(id) {
				uni.navigateTo({
					url: '/pages/center/fangke/qrcode?id=' + id
				})
			},
			getlist() {
				if (!this.nextp) return false;
				uni.showLoading({
					title: '加载中...'
				})
				if (this.nextp) {
					this.$post('center/fangkelist', {
						type: this.state,
						p: this.nextp
					}).then(res => {
						if (this.nextp == 1) {
							this.list = res.list
						} else {
							res.list.forEach(item => {
								this.list.push(item)
							})
						}
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(250, 250, 250);
	}

	.top {
		width: 100vw;
		background-color: white;
	}

	.top1 {
		padding-top: 40rpx;
		padding-bottom: 10rpx;
		display: flex;
		justify-content: space-around;

		>text {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
		}
	}

	.dqxz {
		border-bottom: #ffaf54 solid 2rpx;
	}

	.box {
		width: 90vw;
		margin: 10rpx auto;
		background-color: white;
	}

	.box1 {
		width: 84vw;
		margin: 0rpx auto;
		padding: 20rpx 0;
	}

	.box1-1-1 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: #333333;

		>image {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.box1-1-1text {
		font-size: 26rpx;
		font-weight: 500;
		font-family: Alibaba PuHuiTi;
	}

	.box1-1-2 {
		width: 108rpx;
		height: 42rpx;
		background-color: rgb(237, 238, 246);
		border-radius: 20rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #009BF6;
	}

	.box1-1-22 {
		width: 108rpx;
		height: 42rpx;
		background-color: rgb(253, 238, 236);
		color: #FD1E00;
		border-radius: 20rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;

	}

	.box1-1-222 {
		width: 108rpx;
		height: 42rpx;
		background-color: rgb(238, 238, 238);
		color: #999999;
		border-radius: 20rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;

	}

	.box1-1 {
		display: flex;
		justify-content: space-between;
		margin: 10rpx auto;
	}

	.box1-1-3 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
	}

	.box1-1-4 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}

	.xian {
		width: 84vw;
		height: 2rpx;
		background-color: #f1f1f1;
	}
</style>
